<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<title>Sample</title>
</head>
<body style="margin: 0;padding: 0; text-align:left;">
<div id="info" style="width:100%; min-height:100px; background-color:#A7BD5B;"></div>
<div id="obj_a" style="width:50px; height:50px; background-color:#DC574E; position:absolute; left:100px; top:100px;">A</div>
<div id="obj_b" style="width:50px; height:50px; background-color:#DC574E; position:absolute; left:170px; top:100px;">B</div>

<script>
document.body.onload = initEvent;
function initEvent() {
	var obj = document.getElementById("obj_a");
    obj.addEventListener(
            "mouseover", updateInfo, false);
    obj.addEventListener(
            "mousemove", updateInfo, false);
    obj.addEventListener(
            "mousedown", updateInfo, false);
	obj.addEventListener(
            "mouseup", updateInfo, false);
	obj.addEventListener(
            "mouseout", updateInfo, false);
}
function updateInfo(evt) {
   evt.preventDefault(); // 取消默认的滚动事件
   var info = document.getElementById("info");
   info.innerHTML += evt.currentTarget + "==" + evt.type + "<br />";
}
</script>
</body>
</html>
